<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>画一个立方体2</title>
    <style>

        .wrap {
            perspective: 800px;
            /* perspective-origin: 50% 0px; */
            height: 100vh;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .cube {
            position: relative;
            width: var(--size);
            height: var(--size);
            transform-style: preserve-3d;
            
            transform: rotateX(339deg) rotateY(342deg) rotateZ(15deg);

            --move: calc(var(--size)/-2)
        }

        .cube div {
            position: absolute;
            width: var(--size);
            height: var(--size);

            box-shadow: 0 0 19px rgba(63, 81, 181, 0.21);
            font-size: 30px;
            text-align: center;
            line-height: var(--size);
            color: rgba(255, 255, 255, 0.78);

            /* border-radius: 8px; */
        }

        .s1 {
            transform: translateZ(var(--move));
            background-color: rgba(0, 188, 212, 0.78);
            transform-origin: 0;
        }
        .s2 {
            transform: rotateY(90deg) translateZ(var(--move));
            background-color: rgba(212, 191, 0, 0.78);
            /* transform-origin: left; */
        }
        .s3 {
            transform: rotateX(90deg) translateZ(var(--move));
            background-color: rgba(25, 22, 202, 0.78);
            /* transform-origin: bottom; */
        }
    </style>
</head>

<body>

    <div class="wrap">
        <div class="cube" style="--size: 200px">
            <div class="s1">x-y</div>
            <div class="s2">y-z</div>
            <div class="s3">x-z</div>
        </div>
    </div>



</body>

</html>